<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站投票活动列表样式</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 通用样式 */
        .voting-demo {
            margin-bottom: 4rem;
            padding: 2rem;
            border: 1px solid #eaeaea;
            border-radius: 8px;
        }
        
        .demo-title {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eaeaea;
        }
        
        .voting-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            margin-bottom: 1.5rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .voting-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        }
        
        .organizer-info img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .stats {
            color: #6c757d;
            font-size: 0.875rem;
        }
        
        .stats i {
            margin-right: 4px;
        }
        
        .action-buttons button {
            transition: all 0.2s ease;
        }
        
        .action-buttons button:hover {
            transform: scale(1.05);
        }
        
        .voting-date {
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            display: inline-block;
        }
        
        .voting-status {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
        }
        
        .status-active {
            background-color: #dcfce7;
            color: #166534;
        }
        
        .status-hot {
            background-color: #fee2e2;
            color: #dc2626;
        }
        
        .status-ended {
            background-color: #e5e7eb;
            color: #6b7280;
        }
        
        /* 投票选项样式 */
        .voting-option {
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .voting-option:hover {
            border-color: #94a3b8;
            background-color: #f1f5f9;
        }
        
        .voting-option.selected {
            border-color: #3b82f6;
            background-color: #eff6ff;
        }
        
        .option-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }
        
        .progress-container {
            height: 8px;
            background-color: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 0.5rem;
        }
        
        .progress-bar {
            height: 100%;
            background-color: #3b82f6;
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        /* 样式1：标准卡片式 */
        .style-1 .voting-card {
            border: 1px solid #eaeaea;
        }
        
        .style-1 .voting-image {
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .style-1 .voting-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .style-1 .voting-card:hover .voting-image img {
            transform: scale(1.03);
        }
        
        .style-1 .voting-image .voting-date {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        
        .style-1 .voting-content {
            padding: 1.25rem;
        }
        
        /* 样式2：紧凑列表式 */
        .style-2 .voting-card {
            border: none;
            border-bottom: 1px solid #eaeaea;
            padding: 1rem 0;
        }
        
        .style-2 .voting-card:last-child {
            border-bottom: none;
        }
        
        .style-2 .voting-image {
            max-height: 140px;
            overflow: hidden;
            border-radius: 6px;
        }
        
        .style-2 .voting-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .style-2 .voting-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0.5rem 0;
        }
        
        /* 样式3：突出选项式 */
        .style-3 .voting-card {
            border: 1px solid #eaeaea;
            background-color: white;
        }
        
        .style-3 .voting-header {
            padding: 1rem;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .style-3 .voting-options {
            padding: 0 1rem 1rem;
        }
        
        /* 样式4：无图投票风格 */
        .style-4 .voting-card {
            border-left: 4px solid #3b82f6;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .style-4 .voting-content {
            padding: 1.25rem;
        }
        
        .style-4 .voting-details {
            background-color: #f8fafc;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid #e2e8f0;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        
        .style-4 .detail-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .style-4 .detail-item i {
            color: #3b82f6;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .style-2 .voting-image {
                margin-bottom: 1rem;
            }
            
            .style-3 .voting-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .action-buttons {
                margin-top: 0.75rem;
            }
            
            .style-4 .voting-details {
                flex-direction: column;
                gap: 0.75rem;
            }
        }
    </style>
</head>
<body class="p-4 bg-light">
    <div class="container">
        <h1 class="text-center mb-5">社交网站投票活动列表样式</h1>
        
        <!-- 样式1：标准卡片式 -->
        <div class="voting-demo style-1 bg-white">
            <h3 class="demo-title">1. 标准卡片式投票活动</h3>
            
            <!-- 带单张图片的投票活动 -->
            <div class="voting-card">
                <div class="row">
                    <div class="col-md-4">
                        <div class="voting-image">
                            <img src="https://picsum.photos/600/400?random=1" alt="城市公园设计方案投票">
                            <span class="voting-date"><i class="far fa-calendar-alt me-1"></i> 截止至10月30日</span>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="voting-content">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div class="organizer-info d-flex align-items-center">
                                    <img src="https://picsum.photos/100/100?random=101" alt="活动组织者头像">
                                    <div class="ms-2">
                                        <div class="font-medium">城市规划局</div>
                                        <div class="text-sm text-muted">发布于 5天前</div>
                                    </div>
                                </div>
                                <span class="voting-status status-active"><i class="fas fa-check-circle me-1"></i> 进行中</span>
                            </div>
                            
                            <h5 class="voting-title mb-2">
                                <a href="#" class="text-dark text-decoration-none hover:text-primary">城市中心公园设计方案投票</a>
                            </h5>
                            
                            <p class="text-muted mb-3 line-clamp-2">为城市中心公园选择最佳设计方案，共有三个候选方案，投票结果将作为最终建设参考。欢迎市民积极参与，为我们的城市添彩...</p>
                            
                            <!-- 部分投票选项预览 -->
                            <div class="voting-options-preview mb-3">
                                <div class="voting-option d-flex align-items-center">
                                    <input type="radio" name="park-design" class="me-3" id="option1">
                                    <label for="option1" class="flex-grow-1">生态自然方案</label>
                                    <span class="text-sm text-muted">38%</span>
                                </div>
                                <div class="voting-option d-flex align-items-center">
                                    <input type="radio" name="park-design" class="me-3" id="option2">
                                    <label for="option2" class="flex-grow-1">现代简约方案</label>
                                    <span class="text-sm text-muted">42%</span>
                                </div>
                            </div>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                                <div class="stats d-flex gap-3">
                                    <span><i class="far fa-eye"></i> 8.7k</span>
                                    <span><i class="far fa-comment"></i> 342</span>
                                    <span><i class="fas fa-vote-yea"></i> 2.3k人已投票</span>
                                </div>
                                
                                <div class="action-buttons d-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill">
                                        <i class="far fa-thumbs-up me-1"></i> 点赞
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark me-1"></i> 收藏
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-info-circle me-1"></i> 查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带多张图片的投票活动 -->
            <div class="voting-card">
                <div class="row">
                    <div class="col-md-4">
                        <div class="voting-image" style="display: flex; gap: 3px; height: 200px;">
                            <img src="https://picsum.photos/300/400?random=2" alt="年度最佳产品1" style="flex: 1;">
                            <div style="flex: 1; display: flex; flex-direction: column; gap: 3px;">
                                <img src="https://picsum.photos/300/200?random=3" alt="年度最佳产品2" style="flex: 1;">
                                <img src="https://picsum.photos/300/200?random=4" alt="年度最佳产品3" style="flex: 1;">
                            </div>
                            <span class="voting-date"><i class="far fa-calendar-alt me-1"></i> 截止至11月15日</span>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="voting-content">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div class="organizer-info d-flex align-items-center">
                                    <img src="https://picsum.photos/100/100?random=102" alt="活动组织者头像">
                                    <div class="ms-2">
                                        <div class="font-medium">科技产品评测</div>
                                        <div class="text-sm text-muted">发布于 2天前</div>
                                    </div>
                                </div>
                                <span class="voting-status status-hot"><i class="fas fa-fire me-1"></i> 热门</span>
                            </div>
                            
                            <h5 class="voting-title mb-2">
                                <a href="#" class="text-dark text-decoration-none hover:text-primary">2023年度最佳科技产品投票</a>
                            </h5>
                            
                            <p class="text-muted mb-3 line-clamp-2">从今年发布的众多科技产品中评选出最佳智能手机、笔记本电脑、智能家居设备等，每个品类有5个候选产品，快来为你喜欢的产品投票吧...</p>
                            
                            <!-- 部分投票选项预览 -->
                            <div class="voting-options-preview mb-3">
                                <div class="voting-option d-flex align-items-center">
                                    <input type="radio" name="tech-product" class="me-3" id="tech1">
                                    <label for="tech1" class="flex-grow-1">智能手机品类 - 品牌A Pro Max</label>
                                    <span class="text-sm text-muted">52%</span>
                                </div>
                                <div class="voting-option d-flex align-items-center">
                                    <input type="radio" name="tech-product" class="me-3" id="tech2">
                                    <label for="tech2" class="flex-grow-1">智能手机品类 - 品牌B 14 Pro</label>
                                    <span class="text-sm text-muted">38%</span>
                                </div>
                            </div>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                                <div class="stats d-flex gap-3">
                                    <span><i class="far fa-eye"></i> 15.2k</span>
                                    <span><i class="far fa-comment"></i> 876</span>
                                    <span><i class="fas fa-vote-yea"></i> 6.9k人已投票</span>
                                </div>
                                
                                <div class="action-buttons d-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill">
                                        <i class="far fa-thumbs-up me-1"></i> 点赞
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark me-1"></i> 收藏
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-info-circle me-1"></i> 查看详情
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式2：紧凑列表式 -->
        <div class="voting-demo style-2 bg-white">
            <h3 class="demo-title">2. 紧凑列表式投票活动</h3>
            
            <!-- 带图片的投票活动 -->
            <div class="voting-card">
                <div class="row">
                    <div class="col-md-3">
                        <div class="voting-image">
                            <img src="https://picsum.photos/400/300?random=5" alt="社区活动投票">
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="voting-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">社区秋季活动选择投票</a>
                                </h6>
                                <span class="voting-status status-active">进行中</span>
                            </div>
                            
                            <div class="voting-meta">
                                <span><i class="far fa-calendar-alt me-1"></i> 截止至10月25日</span>
                                <span><i class="fas fa-vote-yea me-1"></i> 342人已投票</span>
                            </div>
                            
                            <p class="text-muted text-sm mb-2 line-clamp-1">为社区秋季活动选择最受欢迎的项目，选项包括：秋季野餐、户外电影夜、手工工作坊和亲子运动会...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="organizer-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=103" alt="活动组织者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">阳光社区居委会</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 1.2k</span>
                                        <span><i class="far fa-comment"></i> 45</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-thumbs-up"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图片的投票活动 -->
            <div class="voting-card">
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="voting-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">公司年会主题投票</a>
                                </h6>
                                <span class="voting-status status-active">进行中</span>
                            </div>
                            
                            <div class="voting-meta">
                                <span><i class="far fa-calendar-alt me-1"></i> 截止至11月5日</span>
                                <span><i class="fas fa-vote-yea me-1"></i> 128人已投票</span>
                            </div>
                            
                            <p class="text-muted text-sm mb-2 line-clamp-1">为公司年度晚会选择主题，候选主题包括：星光之夜、未来科技、复古派对和奇幻旅程...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="organizer-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=104" alt="活动组织者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">行政部</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 256</span>
                                        <span><i class="far fa-comment"></i> 23</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-thumbs-up"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带图片的投票活动 -->
            <div class="voting-card">
                <div class="row">
                    <div class="col-md-3">
                        <div class="voting-image">
                            <img src="https://picsum.photos/400/300?random=6" alt="校园歌手大赛投票">
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="voting-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">校园十大歌手决赛投票</a>
                                </h6>
                                <span class="voting-status status-ended">已结束</span>
                            </div>
                            
                            <div class="voting-meta">
                                <span><i class="far fa-calendar-alt me-1"></i> 已于10月15日结束</span>
                                <span><i class="fas fa-vote-yea me-1"></i> 1256人已投票</span>
                            </div>
                            
                            <p class="text-muted text-sm mb-2 line-clamp-1">为校园十大歌手比赛的10名决赛选手投票，选出最受欢迎歌手，投票结果将占最终成绩的30%...</p>
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="organizer-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=105" alt="活动组织者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">学生会文艺部</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 5.8k</span>
                                        <span><i class="far fa-comment"></i> 328</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-thumbs-up"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary rounded-pill">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式3：突出选项式 -->
        <div class="voting-demo style-3 bg-white">
            <h3 class="demo-title">3. 突出选项式投票活动</h3>
            
            <!-- 带多张图片的投票活动 -->
            <div class="voting-card">
                <div class="voting-header">
                    <div>
                        <h5 class="voting-title mb-1">
                            <a href="#" class="text-dark text-decoration-none hover:text-primary">周末聚餐餐厅选择</a>
                        </h5>
                        <div class="organizer-info d-flex align-items-center">
                            <img src="https://picsum.photos/100/100?random=106" alt="活动组织者头像" style="width: 28px; height: 28px;">
                            <div class="ms-2">
                                <div class="font-medium text-sm">好友群</div>
                                <div class="text-xs text-muted">投票截止：10月28日 12:00</div>
                            </div>
                        </div>
                    </div>
                    <span class="voting-status status-active"><i class="fas fa-check-circle me-1"></i> 进行中</span>
                </div>
                
                <div class="voting-options">
                    <p class="text-muted mb-3 text-sm">周末朋友聚餐，选出大家最想去的餐厅：</p>
                    
                    <div class="voting-option">
                        <img src="https://picsum.photos/400/200?random=7" alt="日式料理餐厅" class="option-image">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>日式料理餐厅</strong>
                                <p class="text-sm text-muted mt-1">新鲜刺身、寿司拼盘、日式烧烤</p>
                            </div>
                            <input type="radio" name="restaurant" class="ms-3">
                        </div>
                        <div class="progress-container">
                            <div class="progress-bar" style="width: 45%"></div>
                        </div>
                        <div class="text-right text-sm text-muted mt-1">45% (9/20票)</div>
                    </div>
                    
                    <div class="voting-option">
                        <img src="https://picsum.photos/400/200?random=8" alt="创意融合菜餐厅" class="option-image">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>创意融合菜餐厅</strong>
                                <p class="text-sm text-muted mt-1">中西融合创意料理、特色鸡尾酒</p>
                            </div>
                            <input type="radio" name="restaurant" class="ms-3">
                        </div>
                        <div class="progress-container">
                            <div class="progress-bar" style="width: 35%"></div>
                        </div>
                        <div class="text-right text-sm text-muted mt-1">35% (7/20票)</div>
                    </div>
                    
                    <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 gap-3">
                        <div class="stats d-flex gap-4">
                            <span><i class="far fa-eye"></i> 42人查看</span>
                            <span><i class="far fa-comment"></i> 18条评论</span>
                            <span><i class="fas fa-vote-yea"></i> 20人已投票</span>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 12
                            </button>
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="fas fa-info-circle me-1"></i> 详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带单张图片的投票活动 -->
            <div class="voting-card">
                <div class="voting-header">
                    <div>
                        <h5 class="voting-title mb-1">
                            <a href="#" class="text-dark text-decoration-none hover:text-primary">公司团建活动方案投票</a>
                        </h5>
                        <div class="organizer-info d-flex align-items-center">
                            <img src="https://picsum.photos/100/100?random=107" alt="活动组织者头像" style="width: 28px; height: 28px;">
                            <div class="ms-2">
                                <div class="font-medium text-sm">人力资源部</div>
                                <div class="text-xs text-muted">投票截止：11月10日 18:00</div>
                            </div>
                        </div>
                    </div>
                    <span class="voting-status status-active"><i class="fas fa-check-circle me-1"></i> 进行中</span>
                </div>
                
                <div class="voting-options">
                    <p class="text-muted mb-3 text-sm">12月公司团建活动方案选择，共三个方案可供选择：</p>
                    
                    <div class="voting-option">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>方案A：户外拓展 + 烧烤</strong>
                                <p class="text-sm text-muted mt-1">一天户外拓展训练，晚上自助烧烤晚会</p>
                            </div>
                            <input type="radio" name="team-building" class="ms-3">
                        </div>
                        <div class="progress-container">
                            <div class="progress-bar" style="width: 52%"></div>
                        </div>
                        <div class="text-right text-sm text-muted mt-1">52% (32/61票)</div>
                    </div>
                    
                    <div class="voting-option">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>方案B：温泉度假 + 团队游戏</strong>
                                <p class="text-sm text-muted mt-1">两天一夜温泉度假村，包含团队互动游戏</p>
                            </div>
                            <input type="radio" name="team-building" class="ms-3">
                        </div>
                        <div class="progress-container">
                            <div class="progress-bar" style="width: 35%"></div>
                        </div>
                        <div class="text-right text-sm text-muted mt-1">35% (21/61票)</div>
                    </div>
                    
                    <div class="voting-option">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>方案C：城市定向越野 + 聚餐</strong>
                                <p class="text-sm text-muted mt-1">半天城市定向越野，晚上团队聚餐</p>
                            </div>
                            <input type="radio" name="team-building" class="ms-3">
                        </div>
                        <div class="progress-container">
                            <div class="progress-bar" style="width: 13%"></div>
                        </div>
                        <div class="text-right text-sm text-muted mt-1">13% (8/61票)</div>
                    </div>
                    
                    <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 gap-3">
                        <div class="stats d-flex gap-4">
                            <span><i class="far fa-eye"></i> 87人查看</span>
                            <span><i class="far fa-comment"></i> 34条评论</span>
                            <span><i class="fas fa-vote-yea"></i> 61人已投票</span>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 24
                            </button>
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="fas fa-info-circle me-1"></i> 详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式4：无图投票风格 -->
        <div class="voting-demo style-4 bg-white">
            <h3 class="demo-title">4. 无图投票活动（适合简单投票场景）</h3>
            
            <!-- 无图投票活动1 -->
            <div class="voting-card">
                <div class="voting-content">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="voting-title">
                            <a href="#" class="text-dark text-decoration-none hover:text-primary">部门季度学习主题投票</a>
                        </h5>
                        <span class="voting-status status-active">进行中</span>
                    </div>
                    
                    <p class="text-muted mb-3">为下季度部门学习分享会选择主题，帮助团队共同成长，每个主题将安排系列分享活动...</p>
                    
                    <div class="voting-options-preview mb-3">
                        <div class="voting-option d-flex align-items-center">
                            <input type="radio" name="learning-topic" class="me-3" id="topic1">
                            <label for="topic1" class="flex-grow-1">人工智能在工作中的应用</label>
                            <span class="text-sm text-muted">42%</span>
                        </div>
                        <div class="voting-option d-flex align-items-center">
                            <input type="radio" name="learning-topic" class="me-3" id="topic2">
                            <label for="topic2" class="flex-grow-1">高效沟通与团队协作</label>
                            <span class="text-sm text-muted">31%</span>
                        </div>
                    </div>
                    
                    <div class="organizer-info d-flex align-items-center mb-3">
                        <img src="https://picsum.photos/100/100?random=108" alt="活动组织者头像">
                        <div class="ms-2">
                            <div class="font-medium">技术部</div>
                            <div class="text-sm text-muted">投票截止：10月30日</div>
                        </div>
                    </div>
                    
                    <div class="voting-details">
                        <div class="detail-item">
                            <i class="far fa-eye"></i>
                            <span>126人查看</span>
                        </div>
                        <div class="detail-item">
                            <i class="far fa-comment"></i>
                            <span>28条评论</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-vote-yea"></i>
                            <span>78人已投票</span>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <button class="btn btn-sm btn-outline-primary rounded-pill">
                            <i class="far fa-thumbs-up me-1"></i> 32
                        </button>
                        <button class="btn btn-sm btn-outline-secondary rounded-pill">
                            <i class="far fa-bookmark me-1"></i> 收藏
                        </button>
                        <button class="btn btn-sm btn-primary rounded-pill">
                            <i class="fas fa-info-circle me-1"></i> 查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 无图投票活动2 -->
            <div class="voting-card">
                <div class="voting-content">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="voting-title">
                            <a href="#" class="text-dark text-decoration-none hover:text-primary">小区业主委员会成员选举</a>
                        </h5>
                        <span class="voting-status status-active">进行中</span>
                    </div>
                    
                    <p class="text-muted mb-3">小区业主委员会成员选举，共8名候选人，选出5名组成新一届业主委员会，为小区发展建言献策...</p>
                    
                    <div class="voting-options-preview mb-3">
                        <div class="voting-option d-flex align-items-center">
                            <input type="checkbox" name="committee" class="me-3" id="candidate1">
                            <label for="candidate1" class="flex-grow-1">张明 - 建筑设计师</label>
                            <span class="text-sm text-muted">328票</span>
                        </div>
                        <div class="voting-option d-flex align-items-center">
                            <input type="checkbox" name="committee" class="me-3" id="candidate2">
                            <label for="candidate2" class="flex-grow-1">李华 - 律师</label>
                            <span class="text-sm text-muted">287票</span>
                        </div>
                    </div>
                    
                    <div class="organizer-info d-flex align-items-center mb-3">
                        <img src="https://picsum.photos/100/100?random=109" alt="活动组织者头像">
                        <div class="ms-2">
                            <div class="font-medium">小区居委会</div>
                            <div class="text-sm text-muted">投票截止：11月15日</div>
                        </div>
                    </div>
                    
                    <div class="voting-details">
                        <div class="detail-item">
                            <i class="far fa-eye"></i>
                            <span>1256人查看</span>
                        </div>
                        <div class="detail-item">
                            <i class="far fa-comment"></i>
                            <span>432条评论</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-vote-yea"></i>
                            <span>876人已投票</span>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <button class="btn btn-sm btn-outline-primary rounded-pill">
                            <i class="far fa-thumbs-up me-1"></i> 156
                        </button>
                        <button class="btn btn-sm btn-outline-secondary rounded-pill">
                            <i class="far fa-bookmark me-1"></i> 收藏
                        </button>
                        <button class="btn btn-sm btn-primary rounded-pill">
                            <i class="fas fa-info-circle me-1"></i> 查看详情
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 为交互按钮添加功能
        document.addEventListener('DOMContentLoaded', function() {
            // 投票选项交互
            const votingOptions = document.querySelectorAll('.voting-option');
            votingOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const input = this.querySelector('input[type="radio"], input[type="checkbox"]');
                    if (input && input.type === 'radio') {
                        // 单选按钮逻辑
                        const name = input.getAttribute('name');
                        document.querySelectorAll(`input[name="${name}"]`).forEach(radio => {
                            radio.closest('.voting-option').classList.remove('selected');
                        });
                    }
                    
                    if (input) {
                        input.checked = !input.checked;
                        this.classList.toggle('selected', input.checked);
                    }
                });
            });
            
            // 点赞按钮交互
            const likeButtons = document.querySelectorAll('button:has(.far.fa-thumbs-up)');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('.far.fa-thumbs-up');
                    if (icon) {
                        // 切换图标
                        icon.classList.toggle('far');
                        icon.classList.toggle('fas');
                        
                        // 切换按钮样式
                        this.classList.toggle('btn-outline-primary');
                        this.classList.toggle('btn-primary');
                        
                        // 更新点赞数（如果有）
                        if (this.textContent.match(/\d+/)) {
                            let countText = this.textContent.trim();
                            let count = parseInt(countText.match(/\d+/)[0]);
                            count = icon.classList.contains('fas') ? count + 1 : count - 1;
                            this.innerHTML = `${icon.outerHTML} ${count > 0 ? count : ''}`.trim();
                        }
                    }
                });
            });
            
            // 收藏按钮交互
            const bookmarkButtons = document.querySelectorAll('button:has(.far.fa-bookmark)');
            bookmarkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('.far.fa-bookmark');
                    if (icon) {
                        icon.classList.toggle('far');
                        icon.classList.toggle('fas');
                        
                        // 切换按钮样式
                        this.classList.toggle('btn-outline-secondary');
                        this.classList.toggle('btn-success');
                    }
                });
            });
            
            // 查看详情按钮交互
            const detailButtons = document.querySelectorAll('button:has(.fas.fa-info-circle)');
            detailButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.voting-card');
                    const title = card.querySelector('.voting-title a').textContent;
                    alert(`查看 "${title}" 的详细信息`);
                    // 实际应用中可以跳转到详情页或显示模态框
                });
            });
        });
    </script>
</body>
</html>
    
